初始化

建立專案資料夾

mkdir jobscanner-template
cd jobscanner-template

pnpm init

補充：pnpm

和 npm、yarn 一樣為套件管理工具，主要優勢在於節省磁碟空間

假如有 100 個專案都使用到同一個 dependency，dependency 大小為 30 kB

• npm：因為專案的 dependency 各自獨立，在電腦上這個 dependency 總共會有 100 份的複製，佔用將近 3MB 的大小
• pnpm：dependency 被放在 content-addressable store 儲存區，集中管理 (如下圖)
  • 若使用到 dependency 不同版本，僅將有差異的部分存入儲存區
  • 所有檔案都會被存放在同一個地方，當安裝新的套件時，檔案會以 hard-link 的方式指向到儲存區的檔案，大大節省空間

圖取自 pnpm - Motivation

安裝套件

安裝 sass 套件(Dart-Sass)，將 .sass .scss檔案編譯成 .css

pnpm add -D sass

常用指令

# 單個檔案編譯
$ sass style.scss:style.css

# 多個檔案編譯
$ sass light.scss:light.css dark.scss:dark.css

# 將 themes/ 所有 Sass 檔案編譯成 CSS, 並輸出放在 public/css/ 下
$ sass themes:public/css

補充：Sass 編譯器

• ruby-sass：2006年 由 Ruby 開發，2019年棄用不再維護
• node-sass：C++ 所寫，2020年棄用不再維護
• dart-sass：利用 Dart 所編寫，官方目前推薦的編譯器

設定 scss 檔案結構

參考 7-1 Pattern 架構，配合專案規模大小作刪減/調整

例如：

styles
├── css
│   ├── style.css
│   └── style.css.map
└── sass
    ├── abstracts
    │   ├── _mixins.scss
    │   └── _variables.scss
    ├── base
    │   ├── _base.scss
    │   └── _reset.scss
    ├── components
    │   ├── _card.scss
    │   └── _input.scss
    └── main.scss

觀摩別人的檔案結構

＊Bulma

取自Bulma - GitHub

＊Bootstrap

取自Bootstrap - GitHub

小結：檔案結構、資料夾名稱，沒有一定標準，自己有一套規則就好

variables 放什麽？

可以將會用到的顏色、文字、間距統一放在一個檔案中管理

例如：

// Colors
$primary-colors: (
  "pale": #EAF9F9,
  "light": #95DFDF,
  "general": #2CBFBF,
  "deep": #11A6AD,
  "dark": #226A7A,
);

// Typography
$font-size: (
  "h1": 44px,
  "h2": 40px,
  "h3": 36px,
  "h4": 28px,
  "h5": 24px,
  "h6": 20px,
  "subtitle": 18px,
  "body1": 14px,
  "body2": 12px,
  "caption": 11px,
);

// Spacing
$spacer: 4px;
$spacers: (
  -1: $spacer * -1,
  0: 0,
  1: $spacer * 1,
  2: $spacer * 2,
  3: $spacer * 3,
  4: $spacer * 4,
  5: $spacer * 5,
);

觀摩別人寫什麽

Bulma 的 initial-variables.scss 拆成六個區塊

• Colors
• Typography
• Spacing
• Responsiveness
• Miscellaneous
• Flags

// Colors

$black:        hsl(0, 0%, 4%) !default;
$black-bis:    hsl(0, 0%, 7%) !default;
$black-ter:    hsl(0, 0%, 14%) !default;

// Typography

$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
$family-monospace: monospace !default;
$render-mode: optimizeLegibility !default;

$size-1: 3rem !default;
$size-2: 2.5rem !default;
$size-3: 2rem !default;

// Spacing

$block-spacing: 1.5rem !default;

// Responsiveness

$gap: 32px !default;
$tablet: 769px !default;

// Miscellaneous

$easing: ease-out !default;
$radius-small: 2px !default;
$radius: 4px !default;
$radius-large: 6px !default;
$radius-rounded: 9999px !default;
$speed: 86ms !default;

// Flags

$variable-columns: true !default
$rtl: false !default;

補充

• !default：Sass 的變數可以使用 !default，用來指派預設值，賦值給尚未賦值的變數。在 Sass Library 常見，確保變數在使用之前已經被定義。
  (User 有寫，就用 User的，沒有就用預設的，不用擔心誰先誰後)

• hsl()：CSS3 新增的用法，使用色相(H)、飽和度(S)以及L(亮度)來定義顏色。